<template>
<!--需要实现通过，点击添加按钮，来将输入框的数据传入到代办事项中-->
  <div id="add-new">
     <input type="text" v-model="newItem">
     <button @click="handleAdd">添加</button>
  </div>
</template>

<script>
export default {
    name: "AddNew",
    data(){
        return{
            newItem:"",
        };
    },
    methods:{
        handleAdd(){
            if (this.newItem == ""){
               alert("不能为空");
               return;
            }
            this.$emit("submitNewItem",this.newItem);
            this.newItem="";
        }
    }
}
</script>

<style scoped>
 input{
     /*隐藏边框*/
     /*border: none;*/
     /*在点击输入框后隐藏边框线*/
     /*outline: none;*/
     width: 150px;
     height: 18px;
     border: 1px solid #999;
     border-radius: 5px;
     margin-right: 7px;
 }
 button{
   color: white;
   height:25px;
   width:50px ;
   background-color: #77ea5b;
   border: none;
   border-radius: 5px;
     font-size: 10px;
 }
</style>